<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
    <p id="message">Wheel</p>

    <script>
        window.onload = function() {
            positionMessage();
        }

        function positionMessage() {//调用定时器移动
            if(!document.getElementById) return false;
            if(!document.getElementById("message")) return false;
            var elem = document.getElementById("message");
            elem.style.position = "absolute";
            elem.style.left = "50px";
            elem.style.top = "100px";
            setTimeout(moveElement("message",200,100,10),100)
        }

        function moveElement(elementID,final_x,final_y,interval) {//移动
            if(!document.getElementById) return false;
            if(!document.getElementById(elementID)) return false;
            var elem = document.getElementById(elementID);
            var xpos = parseInt(elem.style.left);
            var ypos = parseInt(elem.style.top);
            console.log("a")
            if(xpos == final_x && ypos == final_y) {
                return true;
            }
            if(xpos < final_x) {
                xpos++;
            }
            if(xpos > final_x) {
                xpos--;
            }
            if(ypos < final_y) {
                ypos++;
            }
            if(ypos > final_y) {
                ypos--;
            }
            elem.style.left = xpos + "px";
            elem.style.top = ypos + "px";
            var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
            setTimeout(repeat,interval)
        }


    </script>
</body>
</html>